<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
  export default {
    name: "PieChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null,
        timer: null,
        currentIndex: -1,
        isPause: false
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
      this.clearTimer();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts, interval = cfg['interval'] || 1000;
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          legend: {
            orient: 'vertical',
            top: 'center',
            right: cfg['right'] || 0,
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            borderColor: '#000',
            itemGap: 3,
            textStyle: {
              color: '#999',
              fontSize: isSmallScreen ? 10 : cfg['legendFontSize'] || 14,
              fontWeight: isSmallScreen ? 100 : 600
            },
          },
          series: [
            {
              name: '饼图',
              type: 'pie',
              radius: cfg['radius'] || ['50%', '80%'],
              center: cfg['center'] || ['35%', '50%'],
              avoidLabelOverlap: false,
              // silent:true, //取消鼠标事件
              color: cfg['color'] || [],
              label: {
                show: false,
                position: 'center',
              },
              itemStyle: {
                borderWidth: 1,
                borderColor: '#111629'
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#ddd',
                  formatter: '{small|{b}}\n{big|{d}} {percent|%}\n{small|{c}' + (cfg['unit'] || '') + '}',
                  rich: {
                    big: {
                      fontSize: isSmallScreen ? 10 : cfg['bigFontSize'] || 16,
                      lineHeight: isSmallScreen ? 14 : cfg['bigFontSize'] + 2 || 16,
                      fontFamily: 'tapeworm'
                    },
                    small: {
                      fontSize: isSmallScreen ? 10 : cfg['smallFontSize'] || 14,
                      lineHeight: isSmallScreen ? 14 : cfg['smallFontSize'] + 2 || 14 + 2,
                      fontWeight: isSmallScreen ? 100 : 600,
                      color: 'rgba(27,243,222,.6)'
                    },
                    percent: {
                      fontSize: isSmallScreen ? 10 : 12
                    },
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: data || []
            }
          ]
        };
        this.chart = echarts.getInstanceByDom(this.$refs.dom);

        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }

        this.chart.setOption(option, true);

        const fnTimer = () => {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.currentIndex
          });
          this.currentIndex = (this.currentIndex + 1) % dataLen;
          // 高亮当前图形
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.currentIndex
          });
        };

        if (!cfg['noFlash']) {
          if (!this.timer && !this.isPause) {
            this.timer = setInterval(fnTimer, interval);
          }

          this.chart.on('mouseover', () => {
            this.clearTimer();
            this.isPause = !!1;
            this.chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.currentIndex
            });
          });
          this.chart.on('mouseout', () => {
            if (!this.timer) {
              fnTimer();
              this.timer = setInterval(fnTimer, interval);
            }
            this.isPause = !!0;
          });
        }

        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      },
      clearTimer() {
        this.timer && clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
</script>

<style scoped>

</style>
